<script setup>
import { RouterView, RouterLink, useRoute, useRouter } from "vue-router";
import { getCurrentInstance, computed, ref, watch } from "vue";

const emits = defineEmits(["change"]);
const { ctx } = getCurrentInstance();
// console.log(ctx.$emit);

const route = useRoute();
const router = useRouter();
// console.log(route);
// console.log(router);

const user = ref({
  name: "zhangsan",
  age: 18,
});

// 计算属性是一个响应式的数据，当依赖的数据发生变化时，会自动更新
const username = computed(() => {
  return `kfm-${user.value.name}-${user.value.age}`;
});

watch(
  () => user,
  (newVal, oldVal) => {
    console.log("watch", newVal, oldVal);
  },
  { deep: true }
);
</script>

<template>
  <p>{{ user.name }}</p>
  <p>{{ username }}</p>
  app.vue
  <hr />
  <router-view></router-view>
  <router-view name="footer"></router-view>
  <ul>
    <li><router-link to="/">首页</router-link></li>
    <li><router-link to="/login">登录</router-link></li>
    <li><router-link to="/user/admin?id=1">用户1</router-link></li>
    <li><router-link to="/user/zhangsan?id=2">用户2</router-link></li>
    <li><router-link to="/user/lisi?id=3">用户3</router-link></li>
    <li><router-link to="/redirect">重定向</router-link></li>
    <li><router-link to="/adasfs">404</router-link></li>
  </ul>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
